<template>
  <page-view :avatar="avatar" :title="false">
    <div slot="headerContent">
      <div class="title">
        {{ timeFix }}，{{ user.name }}
        <span class="welcome-text">，{{ welcome }}</span>
      </div>
      <div>{{ titleall }} | {{ user.name }} - {{ groupName }}小组</div>
    </div>
    <div slot="extra">
      <a-row class="more-info">
        <a-col :span="8">
          <head-info title="商品" :content="goodsNum.toString()" :center="false" :bordered="false" />
        </a-col>
        <a-col :span="8">
          <head-info title="团队排名" :content="kpiNum.toString()" :center="false" :bordered="false" />
        </a-col>
        <a-col :span="8">
          <head-info title="今日业绩" :content="estComNum | NumberFormat" :center="false" />
        </a-col>
      </a-row>
    </div>
    <div>
      <!-- <span>COMING SOON</span> -->
      <div class="page-header-index-wide" >
        <a-row :gutter="24">
          <!-- 今日实时业绩 -->
          <a-col :sm="24" :md="12" :xl="6">
            <chart-card :loading="loading" title="今日实时业绩" >
              <a-tooltip title="今日实时业绩" slot="action">
                <a-icon type="info-circle-o" />
              </a-tooltip>
              <div slot="total">
                ￥ {{ total2 | NumberFormat }}
              </div>
              <div>
                <trend :flag="status" style="margin-right: 16px;">
                  <span slot="term">日同比</span>
                  {{ pct }}%
                </trend>
                <trend :flag="wSta" >
                  <span slot="term">周同比</span>
                  {{ wPct }}%
                </trend>
              </div>
              <template slot="footer">
                本月预估
                <span>￥ {{ mSf | NumberFormat }}</span>
              </template>
            </chart-card>
          </a-col>
          <!-- 昨日通过商品数 -->
          <a-col :sm="24" :md="12" :xl="6">
            <chart-card :loading="loading" title="昨日通过商品数" >
              <a-tooltip title="昨日通过商品数" slot="action">
                <a-icon type="info-circle-o" />
              </a-tooltip>
              <div slot="total">
                {{ passnum }}
                <trend :flag="passpct">
                  <span slot="term"></span>
                </trend>
              </div>
              <div>
                <mini-bar :data="miniData" title="被翘商品数" />
              </div>
              <template slot="footer">
                正在推广产品数
                <span>{{ passnow }}</span>
              </template>
            </chart-card>
          </a-col>
          <!-- 昨日被翘商品数 -->
          <a-col :sm="24" :md="12" :xl="6">
            <chart-card :loading="loading" title="昨日被翘商品数" >
              <a-tooltip title="昨日被翘商品数" slot="action">
                <a-icon type="info-circle-o" />
              </a-tooltip>
              <div slot="total">
                {{ dignum }}
                <trend :flag="losepct">
                  <span slot="term"></span>
                </trend>
              </div>
              <div>
                <mini-smooth-area
                  :style="{ height: '60px' }"
                  style="margin-left:-10%"
                  :dataSource="yesPassGoodsData"
                  :scale="yesPassGoods"
                />
              </div>
              <template slot="footer">
                被翘商品总数
                <span>{{ dignow }}</span>
              </template>
            </chart-card>
          </a-col>
          <!-- 预估结算服务费 -->
          <a-col :sm="24" :md="12" :xl="6" >
            <chart-card :loading="loading" title="预估结算服务费" >
              <a-tooltip title="预估结算服务费" slot="action">
                <a-icon type="info-circle-o" />
              </a-tooltip>
              <div slot="total">
                {{ todayCmFee }}
                <trend :flag="sumpct">
                  <span slot="term"></span>
                </trend>
              </div>
              <div>
                <mini-progress
                  color="rgb(19, 194, 194)"
                  :target="80"
                  :percentage="percentage"
                  height="8px"
                />
              </div>
              <template slot="footer">
                <div style=" display: flex;justify-content: space-between;align-content: center;">
                  <div>
                    本月结算
                    <span>￥{{ serveNum | NumberFormat }}</span>
                  </div>
                  <div>
                    上月结算
                    <span>￥{{ lastNum | NumberFormat }}</span>
                  </div>
                </div>
              </template>
            </chart-card>
          </a-col>
        </a-row>
        <!-- 链接表 -->
        <!-- <div class="aBox">
          <div class="ali">
            <a href="#">
              <span>佣金查询</span>
              <i class="iconfont iconmoney"></i>
            </a>
          </div>
          <div class="ali">
            <a href="#">
              <span>营销图制作</span>
              <i class="iconfont iconpicture"></i>
            </a>
          </div>
          <div class="ali">
            <a href="#">
              <span>招商录入</span>
              <i class="iconfont iconshangchuan"></i>
            </a>
          </div>
          <div class="ali">
            <a href="#">
              <span>我的活动</span>
              <i class="iconfont iconqizhi"></i>
            </a>
          </div>
          <div class="ali">
            <a href="#">
              <span>出单排行</span>
              <i class="iconfont iconpaihang"></i>
            </a>
          </div>
          <div class="ali">
            <a href="#">
              <span>小组排行</span>
              <i class="iconfont icontree"></i>
            </a>
          </div>
        </div> -->
        <!-- 预估服务费 -->
        <!-- 实时排名 -->
        <div>
          <a-row :gutter="24">
            <a-col :lg="12">
              <a-card style="margin-top:20px" title="全员前五" :bordered="false" >
                <a-table
                  :columns="columns"
                  :rowKey="userRankList => userRankList.jdo_estimate_commission"
                  :dataSource="userRankList"
                  :loading="loading"
                  :pagination="false"
                >
                </a-table>
              </a-card>
            </a-col>
            <a-col :lg="12">
              <a-card style="margin-top:20px" title="前五小组" :bordered="false" >
                <a-table
                  :columns="columns2"
                  :rowKey="groupRankList => groupRankList.jdo_estimate_commission"
                  :dataSource="groupRankList"
                  :loading="loading"
                  :pagination="false"
                >
                </a-table>
              </a-card>
            </a-col>
          </a-row>
        </div>
        <br>
        <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
          <div class="salesCard">
            <a-tabs
              default-active-key="1"
              size="large"
              :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}"
            >
              <div class="extra-wrapper" slot="tabBarExtraContent">
                <div class="extra-item">
                  <a-radio-group defaultValue="3" @change="valChange(value)" v-model="value">
                    <a-radio-button value="1">本周</a-radio-button>
                    <a-radio-button value="2">上周</a-radio-button>
                    <a-radio-button value="3">本月</a-radio-button>
                    <a-radio-button value="4">上月</a-radio-button>
                    <a-radio-button value="5">半年</a-radio-button>
                  </a-radio-group>
                </div>
              </div>
              <a-tab-pane loading="true" tab="预估服务费" key="1">
                <a-row>
                  <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                    <bar :style="{padding: '0px 0px 24px 24px'}" :data="barData" title="销售额排行" />
                  </a-col>
                  <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                    <rank-list title="出单商品排行" :list="rankList" >
                    </rank-list>
                  </a-col>
                </a-row>
              </a-tab-pane>
              <a-tab-pane tab="实际服务费" key="2">
                <a-row>
                  <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                    <bar :style="{padding: '0px 0px 24px 24px'}" :data="barData2" title="实际服务费" />
                  </a-col>
                  <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                    <rank-list title="出单商品排行" :list="rankList" />
                  </a-col>
                </a-row>
              </a-tab-pane>
            </a-tabs>
          </div>
        </a-card>
        <!-- 小组业绩 -->
        <div
          class="antd-pro-pages-dashboard-analysis-twoColLayout"
          :class="isDesktop() ? 'desktop' : ''"
        >
          <a-row :gutter="24" type="flex" :style="{ marginTop: '24px' }">
            <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
              <a-card :loading="loading" :bordered="false" title="小组业绩" :style="{ height: '100%' }">
                <div slot="extra">
                  <div class="performance-extra">
                    <a-radio-group defaultValue="3" @change="valChange2(value2)" v-model="value2">
                      <a-radio-button value="1">本周</a-radio-button>
                      <a-radio-button value="2">上周</a-radio-button>
                      <a-radio-button value="3">本月</a-radio-button>
                      <a-radio-button value="4">上月</a-radio-button>
                      <a-radio-button value="5">半年</a-radio-button>
                    </a-radio-group>
                  </div>
                </div>
                <a-row :gutter="68">
                  <a-col :xs="48" :sm="24" :style="{ marginBottom: ' 24px'}">
                    <div>今日统计小组业绩</div>
                    <div>￥2723.53</div>
                    <div>
                      <mini-smooth-area
                        :style="{ height: '60px' }"
                        :dataSource="groupStatisticsData"
                        :scale="groupStatistics"
                      />
                    </div>
                  </a-col>
                </a-row>
                <div class="ant-table-wrapper">
                  <a-table
                    row-key="index"
                    size="small"
                    :columns="todayRank"
                    :dataSource="todayRankData"
                    :pagination="{ pageSize: 0 }"
                  >
                    <span slot="range" slot-scope="text, record">
                      <trend :flag="record.status === 0 ? 'up' : 'down'">{{ text }}</trend>
                    </span>
                  </a-table>
                </div>
              </a-card>
            </a-col>
            <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
              <a-card
                class="antd-pro-pages-dashboard-analysis-salesCard"
                :loading="loading"
                :bordered="false"
                title="本月目标"
                :style="{ height: '100%' }"
              >
                <div class="dashProBox">
                  <div>
                    <div class="dashPro">
                      <p>0%</p>
                      <a-progress
                        class="progress"
                        :width="470"
                        :strokeWidth="6"
                        :gapDegree="150"
                        strokeLinecap="round"
                        :percent="(finish/target)*100"
                        :format="(percent) => '目标完成'+percent+'%'"
                        type="dashboard" />
                      <p>100%</p>
                    </div>
                    <div class="pandect">
                      <p>目标:{{ target }} 完成:{{ finish }}</p>
                    </div>
                  </div>
                  <!-- <div id=""></div> -->
                </div>
              </a-card>
            </a-col>
          </a-row>
        </div>
      </div>
    </div>
  </page-view>
</template>

<script>
// import moment from 'moment'

import { timeFix } from '@/utils/util'
import { mapState } from 'vuex'
import { PageView } from '@/layouts'
import HeadInfo from '@/components/tools/HeadInfo'
import { mixinDevice } from '@/utils/mixin'

import { getSumKpi, getUserWages, getYesGoods, getSevfeeKpi, getVisitChart, getActualKpi, getKpiChart, getKpiRank, getRealrankKpi } from '@/api/user/dashboard'
// import { getSumKpi, getUserWages, getYesGoods, getSevfeeKpi } from '@/api/local/dashboard'

import {
  ChartCard,
  MiniArea,
  MiniBar,
  MiniProgress,
  RankList,
  Bar,
  Trend,
  NumberInfo,
  MiniSmoothArea,
  Radar
} from '@/components'
const columns = [
  {
    title: '序号',
    customRender: (text, row, index) => {
      return index + 1
    }
  },
  {
    title: '姓名',
    dataIndex: 'user'
  },
  {
    title: '所在小组',
    dataIndex: 'groupName'
  },
  {
    title: '预估服务费',
    dataIndex: 'jdo_estimate_commission'
  }
]
const columns2 = [
  {
    title: '序号',
    customRender: (text, row, index) => {
      return index + 1
    }
  },
  {
    title: '小组组长',
    dataIndex: 'groupName'
  },
  {
    title: '小组预估服务费',
    dataIndex: 'jdo_estimate_commission'
  }
]
export default {
  name: 'Workplace',
  mixins: [mixinDevice],
  components: {
    PageView,
    HeadInfo,
    Radar,
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    RankList,
    Bar,
    Trend,
    NumberInfo,
    MiniSmoothArea
  },
  // 昨日被翘商品数  src/components/chart/minibar
  data () {
    return {
      status: '',
      wSta: '',
      passpct: '',
      losepct: '',
      sumpct: '',
      groupName: '',
      goodsNum: 0,
      kpiNum: 0,
      estComNum: 0,
      columns,
      columns2,
      userRankList: [],
      groupRankList: [],
      time: 3,
      value: 3,
      value2: 3,
      percentage: 0,
      serveNum: 0,
      todayCmFee: 0,
      lastNum: 0,
      passnum: '',
      passnow: '',
      dignum: '',
      dignow: '',
      total2: '',
      pct: '',
      wPct: '',
      mSf: '',
      titleall: window.creatorName,
      timeFix: timeFix(),
      loading: true,
      // 出单排名(文章)
      rankList: [],
      // 今日统计小组业绩 表头
      todayRank: [
        {
          dataIndex: 'index',
          title: '排名',
          width: 90
        },
        {
          dataIndex: 'count',
          align: 'center',
          title: '用户'
        },
        {
          dataIndex: 'range',
          title: '预估服务费',
          align: 'right'
        }
      ],
      // 今日统计小组业绩表格数据
      todayRankData: [
        {
          index: 1,
          count: 2,
          range: 3
        }
      ],
      // 昨日通过商品数数据
      yesPassGoodsData: [],
      // 昨日通过商品数 x轴 y轴
      yesPassGoods: [
        {
          dataKey: 'x',
          alias: '时间'
        },
        {
          dataKey: 'y',
          alias: '被翘商品数',
          min: 1,
          max: 5
        }
      ],
      // 小组业绩数据
      groupStatisticsData: [

      ],
      // 小组业绩 x轴 y轴
      groupStatistics: [],

      barData: [],
      // 访问量x y轴和数据
      barData2: [],
      // 被翘商品x y轴和数据
      miniData: [ ],
      pieStyle: {
        stroke: '#fff',
        lineWidth: 1
      },
      target: 10000,
      finish: 7500
    }
  },
  computed: {
    ...mapState({
      nickname: state => state.user.nickname,
      welcome: state => state.user.welcome
    }),
    userInfo () {
      return this.$store.getters.userInfo
    }
  },
  created () {
    this.user = this.userInfo
    this.avatar = this.userInfo.avatar

    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
    this.getSevfeeKpi()
    this.getYesGoods()
    this.getSumKpi()
    this.getKpiChart(3)
    this.getVisitChart(3)
    this.getKpiRank(3)
    this.getRealrankKpi()
    this.getUserWages()
    this.getActualKpi(3)
  },
  filters: {
    NumberFormat: function (value) {
      if (!value) return '0'
      var intPart = Number(value) - Number(value) % 1 // 获取整数部分
      var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断
      var floatPart = '.00' // 预定义小数部分
      var value2Array = value.toString().split('.')
      //= 2表示数据有小数位
      if (value2Array.length === 2) {
        floatPart = value2Array[1].toString() // 拿到小数部分
        if (floatPart.length === 1) { // 补0,实际上用不着
          return intPartFormat + '.' + floatPart + '0'
        } else {
          return intPartFormat + '.' + floatPart
        }
      } else {
        return intPartFormat + floatPart
      }
    }
  },
  mounted () {},
  methods: {
    valChange2 (val) {
      console.log(val)
      this.getVisitChart(val)
      // this.getKpiRank(val)
    },
    getUserWages () {
      getUserWages({}).then(res => {
        // console.log('getUserWages', res.result)
        this.groupName = res.result.groupName.toString()
        this.goodsNum = res.result.sum.toString()
        this.estComNum = res.result.jdo_estimate_commission.toString()
        this.kpiNum = res.result.ranking.toString()
        // this.barData2 = res.result.map(function (obj) {
        //   var rObj = {}
        //   rObj.x = obj.year
        //   rObj.y = obj.value
        //   return rObj
        // })
      }).catch(err => {
        console.log(err)
      })
    },
    getVisitChart (time) {
      getVisitChart(
        {
          time: time
        }
      ).then(res => {
        // console.log('getVisitChart', res.result)
        this.barData2 = res.result.map(function (obj) {
          var rObj = {}
          rObj.x = obj.year
          rObj.y = obj.value
          return rObj
        })
      }).catch(err => {
        console.log(err)
      })
    },
    valChange (val) {
      // console.log(val)
      this.getKpiChart(val)
      this.getKpiRank(val)
      this.getActualKpi(val)
    },
    getRealrankKpi (time) {
      getRealrankKpi().then(res => {
        // console.log('getRealrankKpi', res.result)
        // this.userRankList = res.result.user_rank
        // this.groupRankList = res.result.group_rank
        this.userRankList = res.result.user_rank.map(function (obj) {
          var rObj = {}
          rObj.jdo_estimate_commission = obj.jdo_estimate_commission
          rObj.groupId = obj.groupId
          rObj.groupName = obj.groupName
          rObj.user = obj.user
          return rObj
        })
        this.groupRankList = res.result.group_rank.map(function (obj) {
          var rObj = {}
          rObj.jdo_estimate_commission = obj.jdo_estimate_commission
          rObj.groupId = obj.groupId
          rObj.groupName = obj.groupName
          return rObj
        })
      }).catch(err => {
        console.log(err)
      })
    },
    getKpiRank (time) {
      getKpiRank(
        {
          time: time
        }
      ).then(res => {
        // console.log('getKpiRank', res.result)
        this.rankList = res.result.map(function (obj) {
          var rObj = {}
          rObj.jdg_sku_id = obj.jdg_sku_id
          rObj.name = obj.jdg_sku_name // 商品名称
          rObj.total = obj.jdo_estimate_commission // 预估服务费
          rObj.num = obj.num// 出单数据量
          rObj.jdg_shop_name = obj.jdg_shop_name// 店铺名称
          return rObj
        })
      }).catch(err => {
        console.log(err)
      })
    },
    getActualKpi (time) {
      getActualKpi(
        {
          time: time
        }
      ).then(res => {
        // console.log('服务费图表', res.result)
        this.barData2 = res.result.map(function (obj) {
          var rObj = {}
          rObj.x = obj.year
          rObj.y = obj.value
          return rObj
        })
      }).catch(err => {
        console.log(err)
      })
    },
    getKpiChart (time) {
      getKpiChart(
        {
          time: time
        }
      ).then(res => {
        // console.log('getKpiChart', res.result)
        this.barData = res.result.map(function (obj) {
          var rObj = {}
          rObj.x = obj.year
          rObj.y = obj.value
          return rObj
        })
      }).catch(err => {
        console.log(err)
      })
    },
    getSumKpi () {
      getSumKpi().then(res => {
        // console.log('sumKpi', res.result)
        this.serveNum = res.result.cm.mon
        this.percentage = res.result.cm.pct
        this.todayCmFee = res.result.cm.num
        this.lastNum = res.result.cm.lastMon
        this.sumpct = res.result.cm.sta
      }).catch(err => {
        console.log(err)
      })
    },
    getYesGoods () {
      getYesGoods().then(res => {
        // console.log('getYesGoods', res)
        this.passnum = res.result.pass.yes_tong
        this.passnow = res.result.pass.last_tong
        this.passpct = res.result.pass.pct
        this.miniData = res.result.pass.yue_tong.map(function (obj) {
          var rObj = {}
          rObj.y = obj.value
          rObj.x = obj.year
          return rObj
        })
        this.dignum = res.result.dig.yes_qiao
        this.dignow = res.result.dig.last_qiao
        this.losepct = res.result.dig.pct
        this.yesPassGoodsData = res.result.dig.yue_qiao.map(function (obj) {
          var rObj = {}
          rObj.y = obj.value
          rObj.x = obj.year
          return rObj
        })
      }).catch(err => {
        console.log(err)
      })
    },
    getSevfeeKpi () {
      getSevfeeKpi().then(res => {
        // console.log('今日实时业绩',res.result)
        this.total2 = res.result.today
        this.pct = res.result.pct
        this.status = res.result.status
        this.wSta = res.result.wSta
        console.log('status', this.status)
        console.log('wSta', this.wSta)
        this.wPct = res.result.wPct
        this.mSf = res.result.mSf
      }).catch(err => {
        console.log(err)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.bgc{
  background-color: green;
}
.bgc2{
  background-color: red;
}
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    a {
      margin-left: 15px;
    }
  }
}
.performance-extra {
  a {
    margin-left: 15px;
  }
}

.antd-pro-pages-dashboard-analysis-twoColLayout {
  position: relative;
  display: flex;
  display: block;
  flex-flow: row wrap;
}

.antd-pro-pages-dashboard-analysis-salesCard {
  height: calc(100% - 24px);
  /deep/ .ant-card-head {
        position: relative;
  }
  .dashProBox{
        .dashPro::v-deep{
        width: 600px;
        // height: 100%;
        margin:0 auto;
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: relative;
        .ant-progress-text{
          font-size: 30px;
        }
      }
      .pandect::v-deep{
        position: absolute;
        top: 380px;
        left: 450px;
        font-size: 20px;
        text-align: center;
        // transform: 50% 50%;
        margin: 0 auto;
      }
    }
  }

.dashboard-analysis-iconGroup {
  i {
    margin-left: 16px;
    color: rgba(0, 0, 0, 0.45);
    cursor: pointer;
    transition: color 0.32s;
    color: black;
  }
}
.analysis-salesTypeRadio {
  position: absolute;
  right: 54px;
  bottom: 12px;
}
.page-header-index-wide {
// 佣金查询...
  .aBox {
    width: 100%;
    padding-top: -10px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-content: center;
    .ali {
      width: 16.5%;
      height: 60px;
      line-height: 60px;
      margin: 5px 5px;
      background-color: rgb(255, 255, 255);
      border-radius: 5px;
      a {
        color: #000000;
        display: flex;
        justify-content: space-around;
        align-items: center;
        // 图标样式
        .iconfont {
          font-family: 'iconfont' !important;
          font-size: 30px;
          font-style: normal;
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
      }
    }
  }
}
@media screen and(max-width: 1200px) {
  .page-header-index-wide {
    .aBox {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-content: center;
      .ali {
        width: 30%;
      }
    }
  }
}
</style>
